<template>
  <div class="index">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="line">
          <div style="color: #49bdfb">待付款</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in list" :key="index">
        <div class="goods-content">
          <el-image
            class="goods-img"
            :src="item.orderBookUrl"
            :preview-src-list="look(item.orderBookUrl)"
          >
          </el-image>
          <div class="goods-text" @click="lookOrder(index)">
            <div class="goods-name">{{ item.orderBookName }}</div>
            <div
              class="f-active-color"
              style="font-size: 6px; padding-top: 8px"
            >
              {{ item.orderUserNickName }}
            </div>
          </div>
          <div>
            <div style="color: red">￥{{ item.orderMoney }}</div>
            <div class="f-color" style="padding: 6px 4px">
              x{{ item.orderCounts }}
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

    <el-drawer
      title="订单信息"
      :visible.sync="drawer"
      :direction="direction"
      :size="'36%'"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <div>
        <div style="padding: 0 10px 6px 12px">
          <span>订单编号:</span>
          <span style="padding-left: 10px">{{book.orderId}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>书名:</span>
          <span style="padding-left: 10px">{{book.orderBookName}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>图书编号:</span>
          <span style="padding-left: 10px">{{book.orderBookId}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>ISBN:</span>
          <span style="padding-left: 10px">{{book.orderBookISBN}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>用户ID:</span>
          <span style="padding-left: 10px">{{book.orderOpenid}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>用户昵称:</span>
          <span style="padding-left: 10px">{{book.orderUserNickName}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>收件人:</span>
          <span style="padding-left: 10px">{{book.orderRecipient}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>手机号:</span>
          <span style="padding-left: 10px">{{book.orderPhone}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>详细地址:</span>
          <span style="padding-left: 10px">{{book.orderAddress}}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>单价:</span>
          <span style="padding-left: 10px">{{book.orderBookPprice}}元</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>数量:</span>
          <span style="padding-left: 10px">{{book.orderCounts}}件</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>总额:</span>
          <span style="padding-left: 10px">{{book.orderMoney}}元</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>时间:</span>
          <span style="padding-left: 10px">{{book.orderTime}}</span>
        </div>
      </div>
    </el-drawer>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="line">
          <div style="color: #49bdfb">各类图书库存统计</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div id="main" class="item2"></div>
  </div>
</template>

<script>
import orderApi from "@/api/order";
import statisticApi from "@/api/statistic";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      list: [],
      counts: [],
      book: {
        orderId: "",
        orderBookName: "",
        orderBookId: "",
        orderBookISBN: "",
        orderOpenid: "",
        orderUserNickName: "",
        orderRecipient: "",
        orderPhone: "",
        orderAddress: "",
        orderBookPprice: "",
        orderCounts: "",
        orderMoney: "",
        orderTime: "",
      },
      swiperOption: {
        loop: true,
        slidesPerView: 3,
        autoplay: false,
        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true,
        // },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },

  components: {
    swiper,
    swiperSlide,
  },

  created() {
    this.fetchData();
  },

  mounted(){
    this.fetch();
  },

  methods: {
    look(url) {
      let photo = [];
      photo.push(url);
      return photo;
    },
    fetchData() {
      orderApi.getAllOrderByStatus("0", "待付款").then((response) => {
        this.list = response.data;
      });
    },
    fetch(){
      statisticApi.getEveryBookCounts().then((response) => {
        this.counts = response.data;
        this.initCharts1();
      });
    },
    lookOrder(index) {
      this.book.orderId = this.list[index].orderId
      this.book.orderBookName = this.list[index].orderBookName
      this.book.orderBookId = this.list[index].orderBookId
      this.book.orderBookISBN = this.list[index].orderBookISBN
      this.book.orderOpenid = this.list[index].orderOpenid
      this.book.orderUserNickName = this.list[index].orderUserNickName
      this.book.orderRecipient = this.list[index].orderRecipient
      this.book.orderPhone = this.list[index].orderPhone
      this.book.orderAddress = this.list[index].orderAddress
      this.book.orderBookPprice = this.list[index].orderBookPprice
      this.book.orderCounts = this.list[index].orderCounts
      this.book.orderMoney = this.list[index].orderMoney
      this.book.orderTime = this.list[index].orderTime
      return (this.drawer = true);
    },
    handleClose(done) {
      done();
    },
    initCharts1() {
      var echarts = require("echarts");
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: [
            "公共课",
            "计算机类",
            "经济管理",
            "土木工程",
            "机械制造",
            "自动化类",
            "通信电子",
            "法律法规",
            "生化环材",
            "文史哲学",
            "医疗卫生",
            "艺术教育",
            "笔墨纸砚",
            "其它",
          ],
          axisLabel: {
            interval: 0,
            rotate: -30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              this.counts.a,
              this.counts.b,
              this.counts.c,
              this.counts.d,
              this.counts.e,
              this.counts.f,
              this.counts.g,
              this.counts.h,
              this.counts.i,
              this.counts.j,
              this.counts.k,
              this.counts.l,
              this.counts.m,
              this.counts.n,
            ],
            type: "bar",
          },
        ],
      };
      myChart.resize();
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.two {
  float: left;
  width: 100%;
}
.index {
  height: 100%;
}
.el-breadcrumb {
  height: 5px;
  padding: 10px;
  border-radius: 4px;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
}
.line {
  border-left: 3px solid #31c17b;
  padding-left: 10px;
}

.order-goods {
  width: 100%;
}
.active {
  border-bottom: 2px solid #49bdfb;
}

.goods-content {
  margin: 10px 0 26px 100px;
  float: left;
  background-color: #f2f2f2;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100px;
  border-radius: 10px;
}
.goods-text {
  width: 220px;
  padding: 0 2px;
}
.goods-img {
  width: 100px;
  height: 70px;
}
.f-color {
  color: #636263;
}
.f-active-color {
  color: #49bdfb;
}
.goods-name {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 6px;
}
</style>